<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar title="个人资料" left-arrow @click-left="$router.back()" />
    <!-- 图片文件输入 将其隐藏，然后通过 vue 手动触发点击事件 -->
    <!-- 只接收 image  -->
    <input
      type="file"
      hidden
      ref="fileInput"
      accept="image/*"
      @change="onImageChaneg"
    />
    <!-- 资料详情 -->
    <van-cell is-link title="头像" center>
      <van-image
        @click="$refs.fileInput.click()"
        fit="cover"
        round
        width="36px"
        height="36px"
        :src="userProfile.photo"
      ></van-image>
    </van-cell>
    <van-cell
      is-link
      title="昵称"
      :value="userProfile.name"
      @click="nameEditShow = true"
    >
    </van-cell>
    <van-cell
      is-link
      title="性别"
      :value="userProfile.gender === 0 ? '男' : '女'"
      @click="sexEditShow = true"
    >
    </van-cell>
    <van-cell
      is-link
      title="生日"
      :value="userProfile.birthday === '' ? '未填写' : userProfile.birthday"
      @click="birthEditShow = true"
    ></van-cell>

    <!-- 昵称popup -->
    <van-popup
      v-model="nameEditShow"
      round
      position="bottom"
      :style="{ height: '100%' }"
    >
      <!-- 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件
            意思是会传递一个 value 参数到子组件，并通过 input 可以触发事件
       -->
      <!-- lazyload 使其关闭时销毁 -->
      <EditName
        v-if="nameEditShow"
        @success-name="userProfile.name = $event"
        @close="nameEditShow = false"
        :name="userProfile.name"
      ></EditName>
    </van-popup>

    <!-- 性别popup -->
    <van-popup v-model="sexEditShow" round position="bottom">
      <EditSex
        v-if="sexEditShow"
        @close="sexEditShow = false"
        v-model="userProfile.gender"
      ></EditSex>
    </van-popup>

    <!-- 生日popup -->
    <van-popup v-model="birthEditShow" position="bottom">
      <EditBirthday
        v-model="userProfile.birthday"
        v-if="birthEditShow"
        @close="birthEditShow = false"
      ></EditBirthday>
    </van-popup>

    <!-- 头像popup -->
    <van-popup
      v-model="photoEditShow"
      position="bottom"
      style="height: 100%; background-color: #000"
    >
      <EditPhoto
        :file="file"
        v-if="photoEditShow"
        @close="photoEditShow = false"
        @success="userProfile.photo = $event"
      ></EditPhoto>
    </van-popup>
  </div>
</template>

<script>
import EditName from './EditName'
import EditSex from './EditSex'
import EditBirthday from './EditBirthday'
import EditPhoto from './EditPhoto'
export default {
  name: 'UserProfile',
  components: { EditName, EditSex, EditBirthday, EditPhoto },
  data () {
    return {
      userProfile: {},
      // 四个 popup 的显示控制
      birthEditShow: false,
      sexEditShow: false,
      nameEditShow: false,
      photoEditShow: false,
      file: null
    }
  },
  created () {
    this.getUserProfile()
  },
  methods: {
    // 请求获取个人数据资料
    async getUserProfile () {
      const { data: res } = await this.$https.get('/app/v1_0/user/profile')
      this.userProfile = res.data
    },
    onImageChaneg () {
      // 通过 files 这个附加属性可以获取 input 选择的所有文件，将第一个设置为一个 url 并传入子组件
      const file = this.$refs.fileInput.files[0]
      // const blob = window.URL.createObjectURL(this.$refs.fileInput.files[0]) 因为后续请求要求修改
      this.file = file
      this.photoEditShow = true
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-popup {
  background-color: #f5f7f9;
}
</style>
